<template>
  <div>
    <p>标题</p>
    <input type="text" v-model="title">
    <p>内容</p>
     <input type="text" v-model="content">

     <div class="btn" @click="add()">
        添加
     </div>
     <div v-if="isshow">请求错误..... </div>
  </div>
</template>

<script>
// 错误处理
import axios from 'axios'
export default {
  name: 'axios3-4',
  data(){
    return {
       title:'',
       content:'',
       isshow : false
    }
  },
  created(){
    //平常错误处理
    let innstance =axios.create({})
    innstance.get('/cache/get',{params:{key:12}})
             .then(
               (res)=>{
                console.log('后端处理成功！'+res)
                this.title='ok'
               }
             ).catch(
               (err=>{
                console.log('后端处理错误！'+err.name)
                this.title='fail'
               })
             )
    //错误处理:实际开发中，一般添加统一错误处理
    let innstance2 =axios.create({})
    //请求拦截器 拦截错误 4开头 401超时 404
    innstance2.interceptors.request.use(
      config=>{
        return config
      },err=>{
        return Promise.reject(err)
      }
    )
    //响应拦截器 响应错误  5开头 5r00 502 系统重启,405
    innstance2.interceptors.response.use(
      config=>{ 
        return config
      },err=>{
        this.isshow=true
        setTimeout(()=>{
          this.isshow=false
        },2000)
        return Promise.reject(err)
      }
    ) 
    //发起请求
    innstance2.get('/cache/get',{params: {key:"userId_1101"}})
  

  }
}
</script>
